<template>
  <div v-if="config && module.modules.length" class="pingmianlunbo">
    <div
      v-if="config.type === 'images-text-gird' || config.type === 'images-gird'"
      class="IconAD"
    >
      <div
        v-for="item in module.modules"
        :key="item.id"
        class="iconad-item flex-y"
        :style="{ width: `${100 / config.row}%` }"
      >
        <img
          :class="{
            'images-text-gird': config.type === 'images-text-gird',
            'images-gird': config.type === 'images-gird',
          }"
          :src="fileBaseUrl + item.pic"
        />
        <div
          v-if="config.type === 'images-text-gird'"
          class="title app-space-ell-1"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div
      v-if="
        config.type === 'images-left-gird' ||
        config.type === 'images-right-gird'
      "
      class="images-left-right-gird"
    >
      <div v-if="config.type === 'images-left-gird'" class="flex left-gird">
        <div class="big">
          <img :src="fileBaseUrl + module.modules[0].pic" alt="" />
        </div>
        <div class="small flex flex-wrap">
          <div class="small-item">
            <img :src="fileBaseUrl + module.modules[1].pic" alt="" />
          </div>
          <div class="small-item">
            <img :src="fileBaseUrl + module.modules[2].pic" alt="" />
          </div>
        </div>
      </div>
      <div v-if="config.type === 'images-right-gird'" class="flex right-gird">
        <div class="small flex flex-wrap">
          <div class="small-item">
            <img :src="fileBaseUrl + module.modules[0].pic" alt="" />
          </div>
          <div class="small-item">
            <img :src="fileBaseUrl + module.modules[1].pic" alt="" />
          </div>
        </div>
        <div class="big">
          <img :src="fileBaseUrl + module.modules[2].pic" alt="" />
        </div>
      </div>
    </div>
  </div>
  <ModuleNotConfig v-else :module="module" />
</template>

<script>
export default {
  props: {
    module: {
      type: Object,
    },
    fileBaseUrl: {
      type: String,
    },
  },
  computed: {
    config({ module }) {
      return module?.dump?.insideParams?.config;
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.IconAD {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 2.5px;
  width: 100%;
  line-height: normal;

  .crosswise-line {
    height: 7px;
    margin-top: 14px;
    width: 100%;
    padding: 0 9.5px;
    box-sizing: border-box;
  }
  .line {
    background-color: #f6f6f6;
    width: 100%;
    height: 7px;
  }
  .iconad-item {
    //width: 25%;
    text-align: center;
    margin-bottom: 10px;
    .images-text-gird {
      width: 36.5px;
      height: 36.5px;
      border-radius: 20px;
      margin: 0 auto;
    }
    .images-gird {
      width: 95%;
      height: 73px;
      margin: 0 auto;
    }

    .title {
      font-size: 12px;
      line-height: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      width: 50px;
      color: rgba(0, 0, 0, 1);
      margin: 0 auto;
      margin-top: 5px;
    }
  }
}

.left-gird {
  width: 100%;
  height: 150px;
  .big,
  .small {
    flex: 1;
  }
  .big {
    margin-right: 5px;
  }
  .small {
    .small-item {
      width: 100%;
      height: 49%;
    }
    img {
      width: 100%;
    }
  }
}
.right-gird {
  width: 100%;
  height: 150px;
  .big,
  .small {
    flex: 1;
  }

  .big {
    margin-left: 5px;
  }

  .small {
    .small-item {
      width: 100%;
      height: 49%;
    }
    img {
      width: 100%;
    }
  }
}
img {
  object-fit: cover !important;
}
</style>
